import { useEffect, useRef } from "react"
import * as echarts from 'echarts';
import './index.scss'
const BarChart = ({title, color, arrs}) => {
    const chartRef = useRef(null)
    useEffect(() => {
        const myChart = echarts.init(chartRef.current);
        // 绘制图表
        const option = {
            title: {
              text: title,
              left: 0,
              textStyle: {
                color: color
              }
            },
            color: color,
            xAxis: [
                {
                    type: 'category',
                    data: arrs,
                    axisTick: {
                        alignWithLabel: true
                    }
                }
            ],
            yAxis: [
                { type: 'value' }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '70%',
                    data: [60, 52, 200, 334, 390, 330, 220]
                }
            ]
        }
        option && myChart.setOption(option);
    },[title,color,arrs])
    return (
        <div className="BarChart" style={{width: '500px', height: '400px'}}  ref={chartRef}></div>
    )
}
export default BarChart